<template>
    <div>
        <el-breadcrumb
            separator-class="el-icon-arrow-right"
            class="breadcrumb-base"
            style="line-height: 30px;"
        >
            <el-breadcrumb-item>
                <!--:to="{ path: '/application' }"-->
                <i class="el-icon-s-operation"></i>
                <span>操作日志</span>
            </el-breadcrumb-item>
        </el-breadcrumb>

        <div class="main-container">
            <div class="filter-box">
                <div class="filter-item">
                    <span>操作类型:</span>
                    <el-select
                        v-model="operationTypeValue"
                        placeholder="请选择"
                        size='mini'
                        style="width:180px"
                    >
                        <el-option
                            v-for="item in filterElement.oprrationType"
                            :key="item.id"
                            :label="item.name"
                            :value="item.name"
                        >
                        </el-option>
                    </el-select>
                </div>
                <div class="filter-item">
                    <span>操作表:</span>
                    <el-input
                        v-model="operationTableValue"
                        size='mini'
                        placeholder="请输入操作表"
                        style="width:180px"
                    ></el-input>
                </div>
                <div class="filter-item">
                    <span>操作时间:</span>
                    <el-date-picker
                        v-model="operationTime"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="yyyy-MM-dd"
                        size='mini'
                        style="width:220px"
                    >
                    </el-date-picker>
                </div>
                <div class="filter-item">
                    <span>操作人:</span>
                    <el-select
                        v-model="operationNameValue"
                        placeholder="请选择"
                        size='mini'
                        style="width:180px"
                    >
                        <el-option
                            v-for="item in filterElement.operations"
                            :key="item.index"
                            :label="item.name"
                            :value="item.name"
                        >
                        </el-option>
                    </el-select>
                </div>
                <el-button
                    type="primary"
                    size="mini"
                    @click="search"
                >搜索</el-button>
            </div>
            <div style="width:100%">
                <el-table
                    height="570"
                    :data="tableData"
                    :border=true
                    :cell-style="{'text-align':'center'}"
                    :header-cell-style="{
            'background-color': '#E6E9EF',
            'color':'#777C7C',
            'font-weight':'400',
            'font-size' : '15px',
            'border-right': '1px solid #ffffff',
            'text-align':'center'}"
                    size="mini"
                    style="width: 100%;margin-top: 20px;"
                    stripe
                >
                    <el-table-column
                        prop="operationName"
                        label="操作人"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="operationTable"
                        label="操作表"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="operationTime"
                        label="操作时间"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="operationType"
                        label="操作类型"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="tableRemark"
                        label="操作内容"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="clientIp"
                        label="客户端IP"
                    >
                    </el-table-column>
                </el-table>
                <el-row
                    style="margin-top: 10px"
                    align="right"
                >
                    <el-pagination
                        @current-change="handleCurrentChange"
                        @size-change="handleSizeChange"
                        :current-page="pageInfo.page"
                        :page-size="pageInfo.size"
                        :page-sizes="pagination_page_sizes"
                        :total="pageInfo.total"
                        style="text-align: center; margin-top: 12px;"
                        layout="sizes, prev, pager, next, total"
                    >
                    </el-pagination>
                </el-row>
            </div>

        </div>
    </div>
</template>

<script>
import { Message } from 'element-ui';
import { itemsPerPage } from '@/client/libs/util';
import { PAGINATION_PAGE_SIZES } from '@/client/consts/constant';

export default {
    name: 'operationRecords',
    data() {
        return {
            pagination_page_sizes: PAGINATION_PAGE_SIZES,
            filterElement: {
                oprrationType: [
                    {
                        id: 1,
                        name: '增加',
                    },
                    {
                        id: 2,
                        name: '删除',
                    },
                    {
                        id: 3,
                        name: '修改',
                    },
                    {
                        id: 4,
                        name: '查询',
                    },
                ],
                operations: [],
            },
            operationTypeValue: '',
            operationTableValue: '',
            operationTime: '',
            operationNameValue: '',
            tableData: [],
            pageInfo: {
                page: 1,
                size: itemsPerPage.get(),
                total: 15,
            },
        };
    },
    mounted() {
        this.userList();
        this.tableDataList(null, null, 1, this.pageInfo.size, null, null, null);
    },
    methods: {
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            itemsPerPage.set(val);
            this.pageInfo.size = val;
            this.tableDataList(
                this.operationTime[0],
                this.operationTime[1],
                this.pageInfo.page,
                this.pageInfo.size,
                this.operationTypeValue,
                this.operationNameValue,
                this.operationTableValue
            );
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.pageInfo.page = val;
            this.tableDataList(
                this.operationTime[0],
                this.operationTime[1],
                this.pageInfo.page,
                this.pageInfo.size,
                this.operationTypeValue,
                this.operationNameValue,
                this.operationTableValue
            );
        },

        //查找 operationTime
        search() {
            this.tableDataList(
                this.operationTime[0],
                this.operationTime[1],
                this.pageInfo.page,
                this.pageInfo.size,
                this.operationTypeValue,
                this.operationNameValue,
                this.operationTableValue
            );
        },
        //请求用户列表
        userList() {
            try {
                this.$axios({
                    method: 'GET',
                    url: `/PROXY-Remote/operation-log/findByName`,
                }).then((d) => {
                    for (let j = 0; j < d.data.data.length; j++) {
                        this.filterElement.operations.push({
                            id: j,
                            name: d.data.data[j],
                        });
                    }
                });
            } catch (e) {
                throw new Error(e);
            }
        },

        //请求典型案例库tabledata数据列表
        tableDataList(
            startOperationTime,
            endOperationTime,
            page,
            size,
            operationTypeValue,
            operationNameValue,
            operationTableValue
        ) {
            try {
                let operationLogSearchVo = {
                    startOperationTime:
                        startOperationTime == null
                            ? null
                            : startOperationTime + ' 00:00:00',
                    endOperationTime:
                        endOperationTime == null
                            ? null
                            : endOperationTime + ' 23:59:59',
                    page: page,
                    size: size,
                    operationType: operationTypeValue,
                    operationName: operationNameValue,
                    operationTable: operationTableValue,
                };
                this.$axios({
                    method: 'POST',
                    url: `/PROXY-Remote/operation-log/getAllOperationLogList`,
                    data: operationLogSearchVo,
                }).then((res) => {
                    if (res.data.code === 200) {
                        this.pageInfo.page =
                            res.data.rows.pageable.pageNumber + 1;
                        this.pageInfo.size = res.data.rows.pageable.pageSize;
                        this.pageInfo.total = res.data.rows.totalElements;
                        this.tableData = res.data.rows.content;
                    }
                });
            } catch (e) {
                throw new Error(e);
            }
        },
    },
};
</script>

<style scoped>
.el-table th.gutter {
    display: table-cell !important;
}

.filter-box {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
}

.filter-item {
    display: flex;
    align-items: center;
}
</style>
